<template>
    <el-row :gutter="20" style="margin-bottom: 20px">
  <el-col :span="6" v-for="(item, index) in stats" :key="index">
    <el-card>
      <div class="stat-card">
        <el-icon :size="36" :style="{ color: item.color }">
          <component :is="item.icon" />
        </el-icon>
        <div class="stat-content">
          <h3>{{ item.value }}</h3>
          <p>{{ item.label }}</p>
        </div>
      </div>
    </el-card>
  </el-col>
</el-row>
</template>

<script setup lang="ts">
    import { ref } from 'vue';

const stats = ref([
  { label: "总用户数", value: 1280, icon: 'UserFilled', color: "#409EFF" },
  { label: "文章总数", value: 560, icon: 'Document', color: "#67C23A" },
  { label: "评论数量", value: 3210, icon: 'ChatLineRound', color: "#E6A23C" },
  { label: "系统消息", value: 12, icon: 'Bell', color: "#F56C6C" }
]);
</script>

<style>
    .stat-card {
  display: flex;
  align-items: center;
}
.stat-content {
  margin-left: 16px;
}
.stat-content h3 {
  margin: 0;
  font-size: 20px;
}
.stat-content p {
  margin: 0;
  color: #666;
}
</style>